<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="fragment/icon::icon"/>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true" th:fragment="model_login">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-info">用户登录</h5>
                <a href="#" onclick="document.getElementById('loginBtnClose').click();document.getElementById('registerBtnNav').click();changeCode()">没有账号？点此注册</a>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="loginBtnClose">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" th:action="|${#request.contextPath}/user/login|" id="loginForm">
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">用户名</label>
                        <div class="col-sm-10">
                            <input id="login_username" class="form-control" name="userName" type="text"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">密码</label>
                        <div class="col-sm-10">
                            <input id="login_password" class="form-control" name="password" type="password"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">验证码</label>
                        <div class="col-sm-10 row" style="margin-left: 0;">
                            <input id="login_checkcode" class="form-control" style="width:274px;"
                                   name="login_checkcode" type="text"/>
                            <img id="login_checkcode_state"
                                 th:src="|${#request.contextPath}/image/code/code.png|"
                                 style="cursor:pointer;position:absolute;width: 20px;height: 20px;left: 62%;top: 19%;">
                            <img id="login_checkcode_img" th:src="|${#request.contextPath}/code/getCode|"
                                 style="height:40px;width:100px;margin-left: 9px;"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" style="left: 0;position: absolute; margin-left: 20px;">没有账号？点此注册</a>
                    <!--                    <button type="button" class="btn btn-secondary " data-dismiss="modal">关闭</button>-->
                    <button type="submit" class="btn btn-primary" id="loginButton" onclick="checkLogin()">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-hidden="true" th:fragment="model_register">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-info">用户注册</h5>
                <a  class="modal-title text-info" href="#" onclick="document.getElementById('registerBtnClose').click();document.getElementById('loginBtnNav').click();changeCode()">已有账号？点此登录</a>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close" id="registerBtnClose">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form th:action="|${#request.contextPath}/user/register|" method="post" id="registerForm">
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">用户名</label>
                        <div class="col-sm-10">
                            <input id="register_username" class="form-control" name="userName"
                                   type="text"/>
                            <span id="checkInfo"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">密码</label>
                        <div class="col-sm-10">
                            <input id="register_password" class="form-control" name="password"
                                   type="password"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">再输一次</label>
                        <div class="col-sm-10">
                            <input id="register_repassword" class="form-control" name="rePassword"
                                   type="password"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">验证码</label>
                        <div class="col-sm-10 row" style="margin-left: 0;">
                            <input id="register_checkcode" class="form-control" style="width:274px;"
                                   name="register_checkcode" type="text"/>
                            <img id="register_checkcode_state"
                                 th:src="|${#request.contextPath}/image/code/code.png|"
                                 style="cursor:pointer;position:absolute;width: 20px;height: 20px;left: 62%;top: 19%;">
                            <img id="register_checkcode_img"
                                 th:src="|${#request.contextPath}/code/getCode|"
                                 style="height:40px;width:100px;margin-left: 9px;"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" style="left: 0;position: absolute; margin-left: 20px;">已有账号？点此登录</a>
                    <button type="button" class="btn btn-primary" id="regButton" onclick="checkRegister()">注册</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script th:fragment="contextPath" th:inline="javascript">
    let contextPath = '[(@{/})]';
    contextPath = contextPath.substring(0,contextPath.length-1);
</script>
<!--th:if="${session.isLogin != null and !session.isLogin}" -->
<script th:fragment="script_login" th:inline="javascript">
    $(function () {
        $('#login_checkcode').bind("blur", function () {
            $.ajax({
                type: "post",
                url: contextPath + "/code/codeVerify",
                data: {'login_checkcode': $('#login_checkcode').val(), 'type': 'login'},
                dataType: "json",
                success: function (data) {
                    if ($('#login_checkcode').val() !== "") {
                        if (data.isRight) {
                            $('#login_checkcode_state').attr("src", contextPath + "/image/code/right.png")
                        } else {
                            $('#login_checkcode_state').attr("src", contextPath + "/image/code/wrong.png")
                        }
                    } else {
                        $('#login_checkcode_state').attr("src", contextPath + "/image/code/code.png")
                    }
                }
            });
        });
    });
    function checkLogin() {
        var logUname = document.getElementById("login_username");
        var logPass = document.getElementById("login_password");
        var logCode = document.getElementById("login_checkcode");
        if (logCode.value === "") {
            swal("请输入验证码。");
            return;
        } else if (logUname.value === "") {
            swal("请输入用户名。");
            return;
        } else if (logPass.value === "") {
            swal("请输入密码。");
            return;
        }
        document.getElementById("loginForm").submit();
    }
</script>
<script th:fragment="script_register_login">
    function changeCode() {
        document.getElementById('register_checkcode_img').src = contextPath + "/code/getCode?" + Date.now();
        document.getElementById('login_checkcode_img').src = contextPath + "/code/getCode?" + Date.now();
    }

    (function () {
        document.getElementById('login_checkcode_img').onclick = changeCode;
        document.getElementById('register_checkcode_img').onclick = changeCode;
    })()
</script>
<script th:fragment="script_register">
    $(function () {
        $('#register_username').bind("blur", function () {
            $.ajax({
                type: "post",
                url: contextPath + "/user/checkUsername",
                data: {'username': $('#register_username').val()},
                dataType: "json",
                success: function (data) {
                    $('#checkInfo').html(data.msg);
                    if (!data.isExist) {
                        $('#checkInfo').css("color", "#12ea03")
                        $('#regButton').removeAttr('disabled');
                    } else {
                        $('#checkInfo').css("color", "#dc3545")
                        $('#regButton').attr('disabled', 'disabled');
                    }
                }
            });
        });
    });
    $(function () {
        $('#register_checkcode').bind("blur", function () {
            $.ajax({
                type: "post",
                url: contextPath + "/code/codeVerify",
                data: {'register_checkcode': $('#register_checkcode').val(), 'type': 'register'},
                dataType: "json",
                success: function (data) {
                    if ($('#register_checkcode').val() !== "") {
                        if (data.isRight) {
                            $('#register_checkcode_state').attr("src", contextPath + "/image/code/right.png")
                        } else {
                            $('#register_checkcode_state').attr("src", contextPath + "/image/code/wrong.png")
                        }
                    } else {
                        $('#register_checkcode_state').attr("src", contextPath + "/image/code/code.png")
                    }
                }
            });
        });
    });
    function checkRegister() {
        var regCode = document.getElementById("register_checkcode");
        var regUname = document.getElementById("register_username");
        var regPass = document.getElementById("register_password");
        var regRePass = document.getElementById("register_repassword");
        if (regCode.value === "") {
            swal("请输入验证码。");
            return;
        } else if (regUname.value === "") {
            swal("请输入用户名。");
            return;
        } else if (regPass.value === "") {
            swal("请输入密码。");
            return;
        } else if (regRePass.value === "") {
            swal("请再输一次密码。");
            return;
        } else if (regRePass.value !== regPass.value) {
            swal("两次密码输入不一致。");
            return;
        }
        document.getElementById("registerForm").submit();
    }
</script>
<div th:fragment="model_script">
    <div th:replace="fragment/model::model_login"></div>
    <div th:replace="fragment/model::model_register"></div>
    <div th:replace="fragment/model::script_login"></div>
    <div th:replace="fragment/model::script_register"></div>
    <div th:replace="fragment/model::script_register_login"></div>
</div>
<div th:fragment="download_video(mediaId)">
    <!-- Button trigger modal -->
    <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#downloadVideoModal">
        下载视频
    </button>-->

    <!-- Modal -->
    <div class="modal fade" id="downloadVideoModal" tabindex="-1" aria-labelledby="downloadVideoModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="downloadVideoModalLabel" style="color: #000000;font-size: 20px">下载视频</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="downloadForm" th:action="@{/media/download}">
                        <input type="hidden" name="mediaId" th:value="${mediaId}">
                        <div class="form-group">
                            <label for="videoQualitySelect" style="color:#000000">清晰度：</label>
                            <select class="form-control" id="videoQualitySelect" onchange="changeVideoQuality(this)" onload="changeVideoQuality(this)" name="videoQualitySelect">
                                <option value="-1" selected>请选择清晰度</option>
                                <option value="4K60" disabled>4K 60Hz</option>
                                <option value="4K" disabled>4K</option>
                                <option value="2K" disabled>2K</option>
                                <option value="1080">1080P</option>
                                <option value="720" disabled>720P</option>
                                <option value="180" disabled>480P</option>
                                <option value="360" disabled>360P</option>
                            </select>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="fileType" id="fileTypeRadios1" value="0" disabled>
                            <label class="form-check-label" for="fileTypeRadios1" style="color:#000000">
                                仅声音
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="fileType" id="fileTypeRadios2" value="1" disabled>
                            <label class="form-check-label" for="fileTypeRadios2" style="color:#000000">
                                仅画面
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="fileType" id="fileTypeRadios3" value="2" checked>
                            <label class="form-check-label" for="fileTypeRadios3" style="color:#000000">
                                声音和画面
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="downloadBtn" form="downloadForm" disabled>Download</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        function changeVideoQuality(self) {
            document.getElementById("downloadBtn").disabled = self.value === "-1";
        }
        (function () {

        })()
    </script>
</div>
</body>
</html>